/* ========== 分类页面样式 ========== */

/* 分类列表容器 */
.category-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px; /* 与下方产品区域拉开距离 */
}

/* 单个分类卡片 */
.category-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* 分类标题 */
.category-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 15px;
    border-bottom: 2px solid #ff6b6b;
    padding-bottom: 10px;
}

.category-title a {
    text-decoration: none;
    color: inherit;
}

.category-title a:hover {
    color: #ff6b6b;
}

/* 子分类列表 */
.subcategory-list {
    list-style: none;
    padding: 0;
}

.subcategory-item {
    margin-bottom: 8px;
}

.subcategory-link {
    text-decoration: none;
    color: #555;
    font-size: 15px;
    padding: 5px 10px;
    display: block;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.subcategory-link:hover {
    background-color: #fff0f0; /* 浅红色背景 */
    color: #ff6b6b;
}

/* 产品展示区域 */
.products-display-area {
    margin-top: 40px;
}

.section-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* 将产品卡片包装在链接中，并去除默认样式 */
.product-card-link {
    text-decoration: none;
    color: inherit;
    display: block; /* 使 a 标签充满整个 grid 区域 */
}

/* 调整产品卡片样式以适应新布局 */
.product-card {
    height: 100%; /* 让卡片高度一致 */
    display: flex;
    flex-direction: column;
}

.product-info {
    flex-grow: 1; /* 让信息区域填充剩余空间 */
}

/* 分类页面响应式设计 */
@media (max-width: 768px) {
    .category-list {
        grid-template-columns: 1fr; /* 在小屏幕上，分类卡片单列显示 */
    }
}
